<template>
  <h1>hello vue3</h1>
  <el-button type="primary" :icon="User" @click="dialogVisible = true">
    按钮
  </el-button>

  <el-dialog v-model="dialogVisible" title="标题~~~">
    <!-- 默认插槽 -->
    <span>中间的内容</span>
    <span>中间的内容</span>
    <span>中间的内容</span>
    <span>中间的内容</span>
    <!-- 具名插槽 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-carousel height="150px">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3 class="carousel-item" text="2xl">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<script setup lang="ts">
// 图标需要手动引入
import { User } from "@element-plus/icons-vue";
import { ref } from "vue";

const dialogVisible = ref(false);

/*
  Form / Form-Item
  Input
  Select
  Upload
  Button
  Table / Table-Column
  Pagination
  Card
*/
</script>

<style scoped>
.carousel-item {
  height: 100%;
  background-color: yellowgreen;
  text-align: center;
  line-height: 150px;
}
</style>
